import { Card, message, Row, Col, Space, Divider } from 'antd';
import ProForm, {
  ProFormRadio,
  ProFormSelect,
  ProFormDatePicker,
  ProFormDependency,
} from '@ant-design/pro-form';
import type { FC } from 'react';
import { useRequest, history } from 'umi';
import { PageContainer } from '@ant-design/pro-layout';
import { fakeSubmitForm, queryCaseDetail, updateCase } from './servic';
import {
  queryUserVisitors,
  diseaseList,
  getBsPathologType,
  queryDictList,
} from '@/services/ant-design-pro/api';

const BasicForm: FC<Record<string, any>> = () => {
  const { run } = useRequest(fakeSubmitForm, {
    manual: true,
    onSuccess: () => {
      message.success('提交成功');
    },
  });

  // const { data, loading } = useRequest(() => {
  //   if (history.location.query.id) {
  //     return queryCaseDetail(history.location.query);
  //   }
  // });

  const onFinish = async (values: Record<string, any>) => {
    values.diseaseId = values.disease.value;
    values.diseaseName = values.disease.label;
    values.visitorId = values.visitor.value;
    values.visitorName = values.visitor.label;
    delete values.disease;
    delete values.visitor;
    if (history.location.query.id) {
      values.id = history.location.query.id;
      try {
        const response = await updateCase(values);
        if (response.code == 200) {
          message.success('修改成功');
        } else {
          message.error('修改失败!');
        }
      } catch (error) {
        console.log(error);
      }
    } else {
      run(values);
    }
  };

  const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 14 },
  };

  return (
    <PageContainer content="">
      <Card bordered={false}>
        <ProForm
          hideRequiredMark
          style={{ margin: 'auto', marginTop: 8 }}
          name="basic"
          layout="horizontal"
          // initialValues={data}
          onFinish={onFinish}
          {...formItemLayout}
          request={async () => {
            if (history.location.query.id) {
              return queryCaseDetail(history.location.query).then(({ data }) => {
                let diseaseTags = [];
                for (var i = 0; i < data.diseaseTags.length; i++) {
                  let item = {};
                  item.value = data.diseaseTags[i].diseaseId;
                  item.label = data.diseaseTags[i].diseaseName;
                  item.key = i;
                  diseaseTags.push(item);
                }
                data.diseaseTags = diseaseTags;
                data.addUserType = data.addUserType + '';
                data.user = data.userId + '-' + data.userName;
                console.log('data', data);
                return data;
              });
            } else {
              return {};
            }
          }}
          submitter={{
            render: (props, doms) => {
              return (
                <Row>
                  <Col span={14} offset={4}>
                    <Space>{doms}</Space>
                  </Col>
                </Row>
              );
            },
          }}
        >
          <ProFormSelect
            width="md"
            name="visitor"
            label="就诊人"
            fieldProps={{
              labelInValue: true,
            }}
            showSearch
            request={async ({ keyWords }) => {
              let query = {
                likeQuery: {
                  visitorName: keyWords,
                },
                pageNum: 1,
                pageSize: 20,
              };
              return queryUserVisitors(query).then(({ data }) => {
                return data.records.map((item) => {
                  return {
                    label: item.visitorName,
                    value: item.id,
                  };
                });
              });
            }}
          />
          <Divider />
          <ProFormSelect
            width="md"
            name="disease"
            label="疾病"
            fieldProps={{
              labelInValue: true,
            }}
            showSearch
            request={async ({ keyWords }) => {
              let query = {
                likeQuery: {
                  name: keyWords,
                },
                pageNum: 1,
                pageSize: 20,
              };
              return diseaseList(query).then(({ data }) => {
                return data.list.map((item) => {
                  return {
                    label: item.name,
                    value: item.id,
                  };
                });
              });
            }}
          />
          <ProFormDatePicker name="confirmedTime" label="确诊时间" width="md" />
          <ProFormSelect
            width="md"
            name="pathologyType"
            label="病例分型"
            // fieldProps={{
            //   labelInValue: true,
            // }}
            showSearch
            request={async ({ keyWords }) => {
              let query = {
                likeQuery: {
                  pathologName: keyWords,
                },
                pageNum: 1,
                pageSize: 20,
              };
              return getBsPathologType(query).then(({ data }) => {
                console.log('data', data);
                return data.list.map((item) => {
                  return {
                    label: item.pathologName,
                    value: item.pathologName,
                  };
                });
              });
            }}
          />
          <ProFormSelect
            width="md"
            name="tumorStageT"
            label="T分期"
            request={async () => {
              const params = { dictCode: 'tumorStageT' };
              return queryDictList(params).then(({ data }) => {
                return data.map((item) => {
                  return {
                    label: item.itemName,
                    value: item.itemName,
                  };
                });
              });
            }}
          />
          <ProFormSelect
            width="md"
            name="tumorStageN"
            label="N分期"
            request={async () => {
              const params = { dictCode: 'tumorStageN' };
              return queryDictList(params).then(({ data }) => {
                return data.map((item) => {
                  return {
                    label: item.itemName,
                    value: item.itemName,
                  };
                });
              });
            }}
          />
          <ProFormSelect
            width="md"
            name="tumorStageM"
            label="M分期"
            request={async () => {
              const params = { dictCode: 'tumorStageM' };
              return queryDictList(params).then(({ data }) => {
                return data.map((item) => {
                  return {
                    label: item.itemName,
                    value: item.itemName,
                  };
                });
              });
            }}
          />
          <ProForm.Item label="突变基因" name="content">
            <Space>
              <ProFormSelect
                name="mutantGene"
                width="155px"
                showSearch
                // fieldProps={{
                //   labelInValue: true,
                //   // mode: 'multiple',
                // }}
                request={async () => {
                  const params = { dictCode: 'mutantGene' };
                  return queryDictList(params).then(({ data }) => {
                    return data.map((item) => {
                      return {
                        label: item.itemName,
                        value: item.itemName,
                      };
                    });
                  });
                }}
              />
              <ProFormSelect
                name="diseaseTags"
                width="155px"
                showSearch
                // fieldProps={{
                //   labelInValue: true,
                // }}
                request={async () => {
                  const params = { dictCode: 'mutantGeneType' };
                  return queryDictList(params).then(({ data }) => {
                    return data.map((item) => {
                      return {
                        label: item.itemName,
                        value: item.itemName,
                      };
                    });
                  });
                }}
              />
            </Space>
          </ProForm.Item>
          <ProFormRadio.Group
            options={[
              {
                value: '1',
                label: '是',
              },
              {
                value: '0',
                label: '否',
              },
            ]}
            label="是否转移"
            name="metastasis"
          />
          <ProFormDependency name={['metastasis']}>
            {({ metastasis }) => {
              if (metastasis == 1) {
                return (
                  <ProFormSelect
                    width="md"
                    name="metastasisSite"
                    label="疾病部位"
                    fieldProps={{
                      mode: 'multiple',
                    }}
                    request={async () => {
                      const params = { dictCode: 'bodyParts' };
                      return queryDictList(params).then(({ data }) => {
                        return data.map((item) => {
                          return {
                            label: item.itemName,
                            value: item.itemName,
                          };
                        });
                      });
                    }}
                  />
                );
              }
            }}
          </ProFormDependency>
        </ProForm>
      </Card>
    </PageContainer>
  );
};

export default BasicForm;
